<template>
	<view>
		<u-navbar :is-back="false" title="">
			<view class="navbar_con">
				<view class="headNavigationBar1">
					<text>浏览</text><text @click="goContribution">投稿</text>
				</view>
			</view>
		</u-navbar>
		<view class="content">
			<!-- 正文内容 -->
			<view class="">
				<view class="browse">
					<!-- 搜索框 -->
					<view class="search" :style="{ backgroundColor: backgroundColor }">
						<view class="content" :style="{ 'border-radius': radius + 'px', border: border }">
							<view class="content-box" :class="{ center: mode === 2 }">
								<text class="icon icon-search">&#xe61c;</text>
								<input class="input" :class="{ center: !active && mode === 2 }" :focus="isFocus" :placeholder="placeholder"
								 v-model="inputVal" @focus="focus" @blur="blur" />
								<!-- <view v-if="!active && mode === 2" class="input sub" @click="getFocus">请输入搜索内容</view> -->
								<text v-if="isDelShow" class="icon icon-del" @click="clear">&#xe644;</text>
							</view>
							<view v-show="(active && show && button === 'inside') || (isDelShow && button === 'inside')" class="searchBtn"
							 @click="search">搜索</view>
						</view>
						<view v-if="button === 'outside'" class="button" :class="{ active: show || active }" @click="search">
							<view class="button-item">{{ !show ? searchName : '搜索' }}</view>
						</view>
					</view>
					<view class="bigBox" v-for="(item,index) in list" :key='index'>
						<view class="box">
							<view class="nav1">
								<view class="left">
									<image :src="item.userHeaderImage" mode="aspectFit" class="image1"></image>
									<text>{{item.userNickname}}</text>
									<image :src="item.userSex=='男'?'../../static/icon/img_icon19.png@2x.png':'../../static/icon/img_icon20.png@2x.png'"
									 mode="aspectFit" class="image2"></image>
								</view>
								<view class="right">
									<text>{{item.dynamicInsertTime}}</text>
								</view>
							</view>
							<!-- 点击举报弹出点击框 -->
							<view class="nav2">
								<text class="nav2-1" @click="goToDetails(item.dynamicId)">{{item.dynamicDescribe}}</text>
								<text class="nav2-2" @click="showRule(item.dynamicId)">举报</text>
								<view v-show="x" id="float">
									<view class='floatContent' v-show="o">
										<view class="floatContent-box">
											<checkbox-group name="" @change="inputCheckbox">
												<view class="floatContent1">
													<label class="checkbox">
														<checkbox value="标题夸张" /><text>标题夸张</text>
													</label>
													<label class="checkbox">
														<checkbox value="广告营销" /><text>广告营销</text>
													</label>
													<label class="checkbox">
														<checkbox value="旧闻/重复" /><text>旧闻/重复</text>
													</label>
													<label class="checkbox">
														<checkbox value="疑似抄袭" /><text>疑似抄袭</text>
													</label>
												</view>
												<view class="floatContent2">
													<label class="checkbox">
														<checkbox value="色情/低俗" /><text>色情/低俗</text>
													</label>
													<label class="checkbox">
														<checkbox value="与事实不符" /><text>与事实不符</text>
													</label>
													<label class="checkbox">
														<checkbox value="内容无营养" /><text>内容无营养</text>
													</label>
													<label class="checkbox">
														<checkbox value="其他问题" /><text>其他问题</text>
													</label>
												</view>
											</checkbox-group>
										</view>
										<image src="../../static/icon/img_icon12.png@2x.png" mode="aspectFit" class="image1"  @click="goReportSuccess()"></image>
										<image src='../../static/icon/img_icon11.png@2x.png' class='ruleHide' @click="hideRule"></image>
									</view>
									<view class="reportSuccess" v-show="o1">
										<image src="../../static/icon/img_icon13.png@2x.png" mode="aspectFit" class="ruleHide1"></image>
										<text>举报成功,系统正在审核...</text>
										<image src='../../static/icon/img_icon11.png@2x.png' class='ruleHide' @click="hideRule"></image>
									</view>
								</view>
							</view>
							<view class="nav3" @click="goToDetails(item.dynamicId)">
								<image :src="item1" mode="aspectFill" v-for="item1 in item.dynamicImage"></image>
							</view>
							<view class="nav4">
								<view class="nav4-1">
									<image :src="imgscr1" mode="aspectFill" @click="modify1(index,item.dynamicId)"></image>
									<text :class="a1">{{item.collectionNum}}</text>
								</view>
								<view class="nav4-2">
									<image :src="imgscr2" mode="aspectFill" @click="modify2"></image>
									<text>{{item.commentNum}}</text>
								</view>
								<view class="nav4-3">
									<image :src="imgscr3" mode="aspectFill" @click="modify3(index,item.dynamicId)"></image>
									<text :class="a2">{{item.pickNum}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	var _self;
	export default {
		props: {
			mode: {
				type: Number,
				default: 1
			},
			button: {
				type: String,
				default: 'outside'
			},
			show: {
				type: Boolean,
				default: true
			},
			radius: {
				type: String,
				default: '60'
			},
			placeholder: {
				type: String,
				default: '请输入搜索内容'
			},
			backgroundColor: {
				type: String,
				default: '#fff'
			},
			border: {
				type: String,
				default: '1px #f5f5f5 solid'
			}
		},
		data() {
			return {
				a1: 'a',
				a2: 'a',
				jubao: [],
				dynamicId: '',
				imgscr1: '../../static/icon/img_icon4.png@2x.png',
				imgscr2: '../../static/icon/img_icon5.png@2x.png',
				imgscr3: '../../static/icon/img_icon7.png@2x.png',
				isRuleTrue: 'isRuleHide',
				active: false,
				inputVal: '',
				searchName: '取消',
				isDelShow: false,
				isFocus: false,
				list: [],
				o: true,
				o1: false,
				cls: [],
				token: '',
				x: false,
				jbId: ""
			};
		},
		onLoad() {
			//页面加载就获取token
			this.getToken()
			//动态列表接口
			this.$request(
				"/comic-time/dynamic?pageNo=1",
				'GET',
			).then(res => {
				console.log(res.data)
				this.list = res.data
			});
		},
		methods: {
			//举报里面点击复选框获取相应的值
			inputCheckbox: function(e) {
				this.cls = e.detail.value //定义cls获取复选框的数组值
				this.cls = this.cls.join(",") //将数组转化为字符串向后台传递
				console.log(this.cls)
			},
			//获取token值
			getToken() {
				try {
					const token = uni.getStorageSync('token');
					console.log(token)
					this.token = token
					console.log(this.token)
				} catch (e) {}
			},
			//显示和隐藏举报成功的页面
			goReportSuccess() {
				this.o = false
				this.o1 = true
				//举报接口
				this.$request(
					"/comic-time/report", {
						"dynamicId": this.jbId,
						"reportContent": this.cls
					},
					'POST', {
						"Authorization": this.token
					}
				).then(res => {
					console.log(res)
				})
			},
			//去投稿详情页
			goContribution() {
				uni.navigateTo({
					url: './contribution'
				})
			},
			//去评论详情页
			goToDetails(pid) {
				console.log(pid)
				uni.navigateTo({
					url: './details?id=' + pid
				})
			},
			//打开透明层
			showRule: function(id) {
				//打开遮罩层
				this.x = true
				//打开举报内容页
				this.o = true
				//关闭举报成功页
				this.o1 = false
				//获取当前id
				this.jbId = id
			},
			//关闭透明层
			hideRule: function() {
				this.x = false
				this.o1 = false
				this.cls = []
				console.log(this.cls)
			},
			focus() {
				this.active = true;
			},
			blur() {
				this.isFocus = false;
				if (!this.inputVal) {
					this.active = false;
				}
			},
			clear() {
				this.inputVal = '';
				this.active = false;
				this.$emit('search', '');
			},
			getFocus() {
				this.isFocus = true;
			},
			search() {
				if (!this.inputVal) return;
				console.log(this.inputVal);
				this.$emit('search', this.inputVal);
			},
			//收藏  取消收藏
			modify1(index, k1) {
				if (this.a1 == 'a') {
					this.list[index].collectionNum++
					this.a1 = 'b'
					this.imgscr1 = '../../static/icon/img_icon36.png@2x.png'
				} else if (this.a1 == 'b') {
					this.list[index].collectionNum--
					this.a1 = 'a'
					this.imgscr1 = '../../static/icon/img_icon4.png@2x.png'
				}
				this.$request(
					"/comic-time/addCollection", {
						"dynamicId": k1,
					},
					'POST', {
						"Authorization": this.token
					}
				).then(res => {
					console.log(res)
				})
			},
			modify2() {},
			//点赞 取消点赞
			modify3(index, k3) {
				if (this.a2 == 'a') {
					this.list[index].pickNum++
					this.a2 = 'b'
					this.imgscr3 = '../../static/icon/img_icon6.png@2x.png'
				} else if (this.a2 == 'b') {
					this.list[index].pickNum--
					this.a2 = 'a'
					this.imgscr3 = '../../static/icon/img_icon7.png@2x.png'
				}
				this.$request(
					"/comic-time/addPink", {
						"dynamicId": k3,
					},
					'POST', {
						"Authorization": this.token
					}
				).then(res => {
					console.log(res)
				})
			}
		},
		watch: {
			inputVal(newVal) {
				if (newVal) {
					this.searchName = '搜索';
					this.isDelShow = true;
				} else {
					this.searchName = '取消';
					this.isDelShow = false;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	[v-cloak] {
		/* 元素隐藏    */
		display: none;
	}

	.navbar_con {
		margin: 0 auto;
		width: 300rpx;
	}

	.headNavigationBar1 {
		text-align: center;

		text:nth-child(1) {
			width: 69rpx;
			height: 34rpx;
			font-family: PingFangSC-Medium;
			font-size: 36rpx;
			font-weight: 800;
			font-stretch: normal;
			line-height: 20rpx;
			letter-spacing: 0rpx;
			color: #000000;
			margin-right: 30rpx;

		}

		text:nth-child(2) {
			width: 69rpx;
			height: 34rpx;
			font-family: PingFangSC-Medium;
			font-size: 36rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 20rpx;
			letter-spacing: 0rpx;
			color: #999999;
		}
	}

	.search {
		display: flex;
		width: 100%;
		// border-bottom: 1px #f5f5f5 solid;
		box-sizing: border-box;
		padding: 24rpx 18rpx 24rpx 32rpx;
		// padding-left: 30rpx;
		font-size: $uni-font-size-base;
		background: #fff;

		.content {
			display: flex;
			align-items: center;
			width: 100%;
			height: 60rpx;
			border: 1px #ccc solid;
			background: #fff;
			overflow: hidden;
			transition: all 0.2s linear;
			border-radius: 30px;

			.content-box {
				width: 100%;
				display: flex;
				align-items: center;
				background-color: #F4F4F4;

				&.center {
					justify-content: center;
				}

				.icon {
					padding: 0 15upx;

					&.icon-del {
						font-size: 38upx;

					}
				}

				.input {
					width: 100%;
					max-width: 100%;
					line-height: 60rpx;
					height: 60rpx;
					color: #333;
					font-size: 28rpx;

					// transition: all 0.2s linear;
					&.center {
						width: 200upx;
					}

					&.sub {
						// position: absolute;
						width: auto;
						color: grey;
					}
				}
			}

			.searchBtn {
				height: 100%;
				flex-shrink: 0;
				padding: 0 30rpx;
				background: $uni-color-success;
				line-height: 60rpx;
				color: #fff;
				border-left: 1px #ccc solid;
				transition: all 0.3s;
			}
		}

		.button {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			flex-shrink: 0;
			width: 0;
			transition: all 0.2s linear;
			white-space: nowrap;
			overflow: hidden;

			&.active {
				padding-left: 15upx;
				width: 100upx;
				color: #8BC34A;
			}
		}
	}

	@font-face {
		font-family: 'iconfont';
		src: url('https://at.alicdn.com/t/font_989023_efq0mtli526.ttf') format('truetype');
	}

	.icon {
		font-family: iconfont;
		font-size: 32upx;
		font-style: normal;
		color: #999;
	}

	.bigBox {
		padding: 0 30rpx;

		.box {
			margin-top: 20rpx;
			padding-bottom: 30rpx;
			background-color: #ffffff;
			border-bottom: 1px solid #eeeeee;

			.nav1 {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					.image1 {
						width: 60rpx;
						height: 60rpx;
						background-color: #1389cd;
						border: solid 1rpx #eeeeee;
						border-radius: 50rpx;
					}

					text {
						font-family: PingFangSC-Medium;
						font-size: 28rpx;
						color: #000000;
						margin: 0 14rpx;
					}

					.image2 {
						width: 30rpx;
						height: 30rpx;
						// background-color: #000;
					}
				}

				.right {
					text {
						width: 110rpx;
						height: 20rpx;
						font-family: PingFangSC-Regular;
						font-size: 20rpx;
						font-weight: normal;
						font-stretch: normal;
						line-height: 48rpx;
						letter-spacing: 0rpx;
						color: #999999;
					}
				}
			}

			.nav2 {
				display: flex;
				justify-content: space-between;
				margin-top: 19rpx;
				// border: 1px solid red;
				z-index: 99;

				text {
					font-family: PingFangSC-Regular;
					font-size: 24rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 48rpx;
					letter-spacing: 0rpx;
					color: #333333;
				}

				.nav2-1 {
					// outline: 1px solid red;
					width: 90%;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					text-indent: 48rpx;
				}

				.nav2-2 {
					font-weight: bolder;
				}

				.isRuleShow {
					display: block;
				}

				.isRuleHide {
					display: none;
				}

				#float {
					height: 100%;
					width: 100%;
					position: fixed;
					background-color: rgba(0, 0, 0, 0.1);
					z-index: 2;
					top: 0;
					left: 0;

					.floatContent {
						padding: 20rpx 0;
						width: 80%;
						height: 500rpx;
						background: #fff;
						margin: 60% auto;
						border-radius: 20rpx;
						position: relative;
						padding-top: 70rpx;

						.floatContent-box {
							display: flex;
							justify-content: space-around;
							align-items: center;

							checkbox-group {
								display: flex;
								justify-content: space-between;
								align-items: center;

								.floatContent2 {
									margin-left: 30rpx;
								}
							}
						}

						.ruleHide {
							height: 60rpx !important;
							width: 60rpx !important;
							position: absolute;
							top: -20rpx;
							right: -28rpx;
						}

						label {
							display: block;
							margin-bottom: 20rpx;

							checkbox {
								color: #faa755;
							}

							text {
								font-size: 28rpx;
							}
						}
						.image1 {
							width: 73%;
							height: 70rpx;
							margin-top: 30rpx;
							position: absolute;
							left: 50%;
							top: 75%;
							transform: translate(-50%, -50%);
						}
					}

					.reportSuccess {
						padding: 20rpx 0;
						width: 80%;
						height: 500rpx;
						background: #fff;
						margin: 60% auto;
						border-radius: 20rpx;
						position: relative;
						padding-top: 70rpx;

						.ruleHide1 {
							position: absolute;
							top: -40%;
							left: -30rpx;
							height: 560rpx;
						}

						text {
							width: 90%;
							position: absolute;
							left: 50%;
							top: 85%;
							transform: translate(-50%, -50%);
							font-size: 30rpx;
							text-align: center;
							// outline: 1px solid red;
							font-weight: bolder;
						}

						.ruleHide {
							height: 60rpx !important;
							width: 60rpx !important;
							position: absolute;
							top: -20rpx;
							right: -28rpx;
						}
					}
				}
			}

			.nav3 {
				display: flex;
				justify-content: flex-start;
				margin-top: 15rpx;
				flex-flow: row wrap;

				image {
					width: 221rpx;
					height: 221rpx;
					border-radius: 10rpx;
					margin-bottom: 20rpx;
					margin-right: 10rpx;

				}
			}

			.nav4 {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				margin-top: 10rpx;

				image {
					width: 25rpx;
					height: 24rpx;
					margin-right: 7rpx;
				}

				.nav4-1 {
					display: flex;
					align-items: center;

					.a {
						color: #666666;
					}

					.b {
						color: #ea1818;
					}

				}

				.nav4-2 {
					display: flex;
					align-items: center;
					margin: 0 200rpx;
					color: #666666;
				}

				.nav4-3 {
					display: flex;
					align-items: center;

					// color: #666666;
					.a {
						color: #666666;
					}

					.b {
						color: #ea1818;
					}
				}
			}

		}
	}
</style>
